<template>
  <view class="address">
    <scroll-view scroll-y class="scrollAddress">
      <uni-swipe-action>
        <uni-swipe-action-item
          v-for="(item, index) in addressList"
          :key="item.id"
          :right-options="options"
          @click="onClick($event, item.id)"
          @change="change($event, index)"
        >
          <view class="addressItem">
            <view class="detail">
              <view class="companyInfo">
                <view class="info">
                  <image
                    v-if="item.defaultFlag"
                    class="default"
                    :src="getStaticDir('/default.png')"
                    mode="scaleToFill"
                  />
                  {{ item.addressDetail }}
                </view>
                <view class="link">
                  {{ item.name }}
                  <text class="phone">{{ item.mobile }}</text>
                </view>
              </view>
            </view>
            <i class="iconfont icon-edit" @click="handleAddress(item.id)"></i>
            <view class="line" :class="current == index ? 'padRight' : ''"></view>
          </view>
        </uni-swipe-action-item>
      </uni-swipe-action>
    </scroll-view>
    <view class="addButton" @click="handleAddress()">
      <view style="margin-right: 8rpx">
        <u-icon name="plus-circle" color="#4C71EE" size="32"></u-icon>
      </view>
      新增地址
    </view>
    <!-- 删除弹窗 -->
    <a-modal
      v-model="deleteModal"
      content="删除后无法恢复，是否确认删除地址？"
      :show-title="false"
      show-cancel-button
      :content-style="{ fontSize: '32rpx', padding: '34rpx 140rpx', color: '#000000' }"
      @confirm="deleteConfirm"
    >
    </a-modal>
  </view>
</template>

<script>
import { getAddressList, addressDelete } from '@/api/address.js';
export default {
  name: 'Address',
  data() {
    return {
      current: null,
      deleteModal: false,
      options: [
        {
          text: '删除',
          style: {
            backgroundColor: '#FF4321'
          }
        }
      ],
      addressList: [],
      deleteId: null
    };
  },
  methods: {
    onClick(e, id) {
      console.log('点击了' + (e.position === 'left' ? '左侧' : '右侧') + e.content.text + '按钮');
      this.deleteId = id;
      this.deleteModal = true;
    },
    change(e, index) {
      console.log('当前状态：' + e + '，下标：' + index);
      if (e == 'none') {
        this.current = null;
      } else {
        this.current = index;
      }
    },
    deleteConfirm() {
      console.log(this.deleteId);
      addressDelete({ id: this.deleteId }).then((res) => {
        if (res.success) {
          this.getList();
        }
      });
    },
    handleAddress(id) {
      if (id) {
        uni.navigateTo({
          url: '/pages/mine/address/address?id=' + id
        });
      } else {
        uni.navigateTo({
          url: '/pages/mine/address/address'
        });
      }
    },
    getList() {
      getAddressList({ pageSize: 999 }).then((res) => {
        res.data.forEach((item) => {
          if (item.addressDetail) {
            item.addressDetail = item.addressDetail.replace('%$', ' ');
          }
        });
        this.addressList = res.data;
      });
    }
  },
  onShow() {
    this.getList();
  }
};
</script>

<style lang="scss" scoped>
/* #ifdef MP-BAIDU */
// @import '/static/iconfont.css';
/* #endif */
@import './index.scss';
</style>
